<template>
  <div class='forum-page'>
    <el-card>
      <div slot='header'>
        <h3>Forum</h3>
      </div>
      <el-divider></el-divider>
      <el-row>
        <el-col :span='24'>
          <el-timeline>
            <el-timeline-item
              v-for='(item, index) in forumData.records'
              :key='item.id'
              :timestamp='item.createTime'
            >
              <div class='forum-item'>
                <div class='forum-content'>{{ item.content }}</div>
                <div class='forum-meta'>
                  <el-button class="star-button" type="primary" icon="el-icon-star-on" @click="handleClick">
<!--                    <el-badge :value="count"></el-badge>-->
                    {{ item.likes }}
                  </el-button>
<!--                  <span class='forum-likes'>Likes: {{ item.likes }}</span>-->
                  <span class='forum-comments'>Comments: {{ item.comments }}</span>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
      <div v-if='forumData.total > 0'>
        <el-pagination
          @size-change='handleSizeChange'
          @current-change='handleCurrentChange'
          :current-page='forumData.current'
          :page-sizes='[10, 20, 50]'
          :page-size='forumData.size'
          :total='forumData.total'
          layout='total, sizes, prev, pager, next, jumper'
        />
      </div>
    </el-card>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
import axios from 'axios'

interface ForumItem {
  createTime: string;
  updateTime: string;
  id: number;
  userId: number;
  content: string;
  likes: number;
  comments: number;
}

interface ForumData {
  total: number;
  current: number;
  records: ForumItem[];
  size: number;
}

export default defineComponent({
  name: 'ForumPage',
  data() {
    return {
      forumData: {
        total: 0,
        current: 1,
        records: [] as ForumItem[],
        size: 10
      } as ForumData
    }
  },
  methods: {
    async fetchForumData(currentPage: number, pageSize: number) {
      const { data } = await axios.post(
        `http://localhost:8077/share/hope/posts/page`,
        {
          'page': {
            'current': 1,
            'size': 10
          },
          'query': {
            'userId': 1
          }
        }
      )
      this.forumData = data.data
      console.log(this.forumData)
    },
    handleSizeChange(pageSize: number) {
      this.fetchForumData(this.forumData.current, pageSize)
    },
    handleCurrentChange(currentPage: number) {
      this.fetchForumData(currentPage, this.forumData.size)
    },
    handleClick() {
      // 在这里处理按钮点击事件
    }
  },
  async created() {
    await this.fetchForumData(this.forumData.current, this.forumData.size)
  }
})
</script>

<style scoped>
.forum-page {
  padding: 20px;
}

.forum-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.forum-content {
  margin-bottom: 10px;
  font-size: 18px;
}

.forum-meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
}

.star-button {
  display: inline-block;
  vertical-align: middle;
}
</style>
